<template>
  <view class="page">
    <!-- 顶部蓝色渐变区域 -->
    <view class="top-bg" v-if="type == 1">
      <view class="amount-grid">
        <view v-for="(opt,idx) in presets" :key="idx" :class="['pill', selectedIndex===idx ? 'pill-active' : '']" @tap="choosePreset(idx)">
          <text class="pill-num">{{ opt }}</text><text class="pill-unit">元</text>
          <text v-if="selectedIndex===idx" class="pill-check">✓</text>
        </view>
      </view>

      <view class="custom-box">
        <text class="custom-prefix">¥</text>
        <input class="custom-input" type="digit" v-model="customAmount" placeholder="请输入自定义数额" placeholder-class="ph" @input="onCustomInput" />
      </view>
    </view>
	<!-- 顶部蓝色渐变区域 -->
	<view class="top-bg" v-if="type == 2">
	  <view class="single-box">
	    <view class="pill pill-active">
	      <text class="pill-num">1000</text><text class="pill-unit">元</text>
	    </view>
	  </view>
	</view>

    <!-- 支付方式 -->
    <view class="pay-row" @tap="payMethod='wechat'">
      <image class="pay-icon" mode="widthFix" src="https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/weier/weichat_pay.png"></image>
      <text class="pay-text">微信支付</text>
      <text class="pay-checked">✓</text>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="btn-primary" @tap="onRecharge">立即充值</button>
    </view>
  </view>
</template>

<script>
import common_config from '../../static/js/common.js';
var config = common_config.config;
var that;	
var userInfo;
export default {
  name: 'RechargePage',
  data() {
    return {
      presets: [200, 500, 1000, 2000],
      selectedIndex: 0,
      customAmount: '',
      payMethod: 'wechat',
	  type:1
    }
  },
  onLoad(options) {
  	that = this;
	that.type = options.type;
	if(that.type == 1){
		uni.setNavigationBarTitle({
			title:'余额充值'
		});
	}
	if(that.type == 2){
		uni.setNavigationBarTitle({
			title:'押金充值'
		});
	}
  	that.plusReady();
  },
  computed: {
    amount() {
      if (this.customAmount) {
        const n = Number(this.customAmount)
        return isNaN(n) ? 0 : n
      }
      return this.presets[this.selectedIndex] || 0
    }
  },
  methods: {
    choosePreset(i) { this.selectedIndex = i; this.customAmount = ''; },
    onCustomInput() { this.selectedIndex = -1; },
    onRecharge() {
      if (this.amount <= 0) { uni.showToast({ title: '请输入正确金额', icon: 'none' }); return }
      uni.showToast({ title: `充值 ¥${this.amount}`, icon: 'none' })
      // TODO: 在此处对接后端下单 + 调起微信支付
    }
  }
}
</script>

<style scoped>
.page { min-height: 100vh; background-color: #f6f7f8; padding-bottom: 140rpx; }
.top-bg { padding: 24rpx; padding-bottom: 40rpx; background: linear-gradient(180deg,#2da8ff 0%,#bfeeff 100%); border-bottom-left-radius: 16rpx; border-bottom-right-radius: 16rpx; }
.amount-grid { display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 28rpx; grid-row-gap: 28rpx; margin-top: 36rpx; }
.pill { position: relative; height: 112rpx; border-radius: 56rpx; background-color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.06); }
.pill-active { border: 4rpx solid #52e7e0; }
.pill-num { font-size: 44rpx; color: #222222; font-weight: 700; }
.pill-unit { font-size: 26rpx; color: #666666; margin-left: 6rpx; }
.pill-check { position: absolute; right: 34rpx; top: 50%; transform: translateY(-50%); font-size: 32rpx; color: #20c7c1; }
.custom-box { margin-top: 28rpx; height: 96rpx; background-color: #ffffff; border-radius: 48rpx; padding: 0 28rpx; display: flex; align-items: center; }
.custom-prefix { font-size: 36rpx; color: #c2c2c2; margin-right: 8rpx; }
.custom-input { flex: 1; font-size: 28rpx; color: #333333; }
.ph { color: #c2c2c2; }
.pay-row { display: flex; align-items: center; padding: 36rpx 24rpx; }
.pay-icon { width: 44rpx; height: 44rpx; margin-right: 12rpx; }
.pay-text { font-size: 30rpx; color: #333333; }
.pay-checked { margin-left: auto; font-size: 32rpx; color: #0bb178; }
.footer { position: fixed; left: 0; right: 0; bottom: 28rpx; padding: 0 28rpx; }
.btn-primary { height: 98rpx; line-height: 98rpx; border-radius: 49rpx; background: linear-gradient(90deg,#1da1ff 0%,#19f3ee 100%); color: #1f1f1f; font-weight: 700; font-size: 34rpx; text-align: center; border: none; }
.single-box{display:flex;align-items:center;justify-content:center;margin-top:60rpx;}
.pill{position:relative;height:112rpx;min-width:260rpx;border-radius:56rpx;background-color:#ffffff;display:flex;align-items:center;justify-content:center;box-shadow:0 6rpx 18rpx rgba(0,0,0,0.06);padding:0 40rpx;}

</style>
